<template>
  <div class="content bg">
    <dv-full-screen-container class="screen-container">
      <!-- 加载组件 -->
      <dv-loading v-if="loading"><span style="color: aliceblue;">Loading...</span></dv-loading>
      <!-- 顶部布局 -->
      <div v-else>
        <div class="d-flex ">
          <dv-decoration-10 style="width:33.3%;height:5px;" />
          <div class="d-flex " style="width: 33.3%;">
            <dv-decoration-8 style="width:320px;height:50px;" />
            <div class="title">
              <span class="title-text">大数据可视化平台</span>
              <dv-decoration-6 class="title-bototm" :reverse="true" :color="['#50e3c2', '#67a1e5']"
                style="width:200px;height:20px;" />
            </div>
            <dv-decoration-8 :reverse="true" style="width:320px;height:50px;" />
          </div>
          <dv-decoration-10 style="width:33.3%;height:5px ; transform: rotateY(180deg);" />
        </div>
      </div>
      <!-- 内容栏目 -->
      <div class="jc-center">
        <dv-border-box-1 style="width: 30%;height: 30%;"><template>
            <div style="display: flex;">
              <div style="width: 50%;height: 240px;margin-top: 5%;">
                <div style="display: flex;justify-content: center;">
                  <span style="color:aliceblue;">男生占比</span>
                </div>
                <div class="echart" id="maleLiqiud" :style="{ width: '100%', height: '240px' }"></div>
              </div>
              <div style="width: 50%;height: 240px;margin-top: 5%;">
                <div style="display: flex;justify-content: center;">
                  <span style="color:aliceblue;">女生占比</span>
                </div>
                <div class="echart" id="femaleLiqiud" :style="{ width: '100%', height: '240px' }"></div>
              </div>
            </div>
          </template>
        </dv-border-box-1>
        <dv-border-box-1 style="width: 30%;height: 30%;"><template>
            <div style="display: block;margin-left: 5%;">
              <div class="echart" id="stageChart" style="width: 95%;height: 300px;"></div>
            </div>
          </template>
        </dv-border-box-1>
        <dv-border-box-8 style="width: 30%;height: 40%;">
          <div style="display: flex;">
            <dv-scroll-board :config="config" style="width:99%;height:400px;margin-left: 0.5%;" />
          </div>
        </dv-border-box-8>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import * as echarts from "echarts";
import "echarts-liquidfill";
export default {
  data() {
    return {
      loading: true,
      config: {
        header: ['列1', '列2', '列3'],
        data: [
          ['行1列1', '行1列2', '行1列3'],
          ['行2列1', '行2列2', '行2列3'],
          ['行3列1', '行3列2', '行3列3'],
          ['行4列1', '行4列2', '行4列3'],
          ['行5列1', '行5列2', '行5列3'],
          ['行6列1', '行6列2', '行6列3'],
          ['行7列1', '行7列2', '行7列3'],
          ['行8列1', '行8列2', '行8列3'],
          ['行9列1', '行9列2', '行9列3'],
          ['行10列1', '行10列2', '行10列3']
        ],
        index: true,
        columnWidth: [50],
        align: ['center'],
        headerBGC: '',
        oddRowBGC: '',
        evenRowBGC: ''
      }
    }
  },
  mounted() {
    this.cancelLoading();
    setTimeout(() => {
      this.init();
    }, 50);
  },
  methods: {
    // 初始化图表
    init() {
      this.initMaleChart();
      this.initFemaleChart();
      this.initStageChart();
    },
    // 加载组件
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 1000);
    },
    initMaleChart() {
      // 数值变化
      var value = 60;
      let option = {
        // backgroundColor: "#000", //背景色
        title: {
          text: value + "%",
          textStyle: {
            fontSize: 20,
            fontFamily: "Microsoft Yahei",
            fontWeight: "normal",
            color: "#fff",
          },
          x: "center",
          y: "48%",
        },
        series: [
          {
            type: "liquidFill", //配置echarts图类型
            radius: "60%",
            center: ["50%", "50%"],
            //  shape: 'roundRect',// 设置水球图类型（矩形[rect]，菱形[diamond]，三角形[triangle]，水滴状[pin],箭头[arrow]...） 默认为圆形
            data: [0.5, 0.5],  //设置波浪的值
            waveAnimation: false, //静止的波浪
            amplitude: 0,
            backgroundStyle: {
              borderWidth: 1,
              color: "transparent",//水球图内部背景色
            },
            outline: {
              borderDistance: 10,
              itemStyle: {
                borderWidth: 4,
                borderColor: "#5acef2",
              },
            },
            color: [ //波浪颜色
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(6, 187, 112, 0.3)", //下
                  },
                  {
                    offset: 0,
                    color: "rgba(11, 201, 199, 0.3)",
                  },
                ],
                globalCoord: false,
              },
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(6, 187, 112, 1)", //下
                  },
                  {
                    offset: 0,
                    color: "rgba(11, 201, 199, 1)",
                  },
                ],
                globalCoord: false,
              },
            ],
            label: {
              normal: {
                formatter: "",
              },
            },
          },

        ],
      };
      const myLiuqiud = echarts.init(document.getElementById("maleLiqiud"));
      myLiuqiud.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myLiuqiud.resize();
      });
    },
    initFemaleChart() {
      // 数值变化
      var value = 60;
      let option = {
        // backgroundColor: "#000", //背景色
        title: {
          text: value + "%",
          textStyle: {
            fontSize: 20,
            fontFamily: "Microsoft Yahei",
            fontWeight: "normal",
            color: "#fff",
          },
          x: "center",
          y: "48%",
        },
        series: [
          {
            type: "liquidFill", //配置echarts图类型
            radius: "60%",
            center: ["50%", "50%"],
            //  shape: 'roundRect',// 设置水球图类型（矩形[rect]，菱形[diamond]，三角形[triangle]，水滴状[pin],箭头[arrow]...） 默认为圆形
            data: [0.5, 0.5],  //设置波浪的值
            waveAnimation: false, //静止的波浪
            amplitude: 0,
            backgroundStyle: {
              borderWidth: 1,
              color: "transparent",//水球图内部背景色
            },
            outline: {
              borderDistance: 10,
              itemStyle: {
                borderWidth: 4,
                borderColor: "#5acef2",
              },
            },
            color: [ //波浪颜色
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(6, 187, 112, 0.3)", //下
                  },
                  {
                    offset: 0,
                    color: "rgba(11, 201, 199, 0.3)",
                  },
                ],
                globalCoord: false,
              },
              {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: "rgba(6, 187, 112, 1)", //下
                  },
                  {
                    offset: 0,
                    color: "rgba(11, 201, 199, 1)",
                  },
                ],
                globalCoord: false,
              },
            ],
            label: {
              normal: {
                formatter: "",
              },
            },
          },

        ],
      };
      const myLiuqiud = echarts.init(document.getElementById("femaleLiqiud"));
      myLiuqiud.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myLiuqiud.resize();
      });
    },
    initStageChart() {
      const option = {
        title: {
          text: '测评阶段分布',
          left: 'left',
          top: 10,
          textStyle: {
            color: '#fff',
          }
        },
        legend: {
          right: 'right',
          top: 'bottom',
          textStyle: {
            color: '#fff',
          }
        },
        tooltip: {
          trigger: 'item',
        },
        visualMap: {
          show: false,
          min: 80,
          max: 600,
          inRange: {
            colorLightness: [0, 1]
          }
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: [
              { value: 335, name: '重度', itemStyle: { color: '#EF3333' } },
              { value: 310, name: '中度', itemStyle: { color: '#E6A23C' } },
              { value: 274, name: '轻度', itemStyle: { color: '#409EFF' } },
              { value: 235, name: '正常', itemStyle: { color: '#67C23A' } }
            ].sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: 'radius',
            label: {
              color: 'rgba(255, 255, 255, 0.3)',
              show: false
            },
            labelLine: {
              lineStyle: {
                color: 'rgba(255, 255, 255, 0.3)'
              },
              smooth: 0.2,
              length: 10,
              length2: 20
            },
            itemStyle: {
              color: '#c23531',
              shadowBlur: 200,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            },
            animationType: 'scale',
            animationEasing: 'elasticOut',
            animationDelay: function (idx) {
              return Math.random() * 200;
            }
          }
        ]
      };
      const stageChart = echarts.init(document.getElementById("stageChart"));
      stageChart.setOption(option);// 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        stageChart.resize();
      });
    }
  }
}
</script>

<style scoped>
.title {
  color: aliceblue;
  position: relative;
  text-align: center;
  background-size: cover;
  background-repeat: no-repeat;
}

.screen-container {
  margin: 0;
  height: 100vh;
  width: 100vw;
}

.d-flex {
  display: flex;
}

.title-text {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translate(-50%);
  width: 300px;
  font-size: x-large;
}

.title-bototm {
  position: absolute;
  bottom: -2.2rem;
  left: 50%;
  transform: translate(-50%);
}

/* 主体 */
.content {
  /* color: #fff; */
  background: #000;
  width: 100vw;
  height: 100vh;
  background: url("../assets/pageBg.png")center center;
  background-size: cover;
}

.jc-center {
  width: 100%;
  margin-top: 2%;
}
</style>